<template>
  <div class="hello">
    <el-row>
      <el-col :span="24">
     <div style="float: left" > 应收金额:{{prices}}元</div>
        <el-button type="warning" size="small"  style="float: right;margin-left: 60px">返回</el-button>
        <el-button type="primary" size="small" @click="payment" style="float: right;">支付</el-button>

      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
        <el-table
          ref="multipleTable"
          :data="yaos"
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column
            label="序号"
            width="120">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="收费名称"
            width="120">
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价(元)"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
          prop="sums"
          label="总量"
          show-overflow-tooltip>
        </el-table-column>
          <el-table-column
            prop="lingshou"
            label="零售金额(元)"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="zhekou"
            label="折扣"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="zhehou"
            label="折后金额(元)"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
      <div  style="height: 50px;width: 200px;align:'right'">处理费:15元  注射费:20元 </div>
      <div  style="padding-left: 511px" >合计:{{prices}}元 </div>
      </el-col>
      <el-col :span="8">
      <table  border="3">
        <tr>
          <td style="height: 50px;width: 200px">患者编号:{{user.id}}</td>
          <td style="height: 50px;width: 200px">患者姓名:{{user.name}}</td>
        </tr>
        <tr>
          <td style="height: 50px;width: 200px">年龄:{{user.age}}</td>
          <td style="height: 50px;width: 200px">性别:{{user.sex==1? "男":"女"}}</td>
        </tr>
        <tr >
          <td style="height: 50px;width: 200px">手机{{user.phone}}</td>
          <td style="height: 50px;width: 200px">会员等级:vip3</td>
        </tr>
        <tr>
          <td style="height: 50px;width: 200px">账户余额:0</td>
          <td style="height: 50px;width: 200px">积分:800</td>
        </tr>
      </table>
      </el-col>
    </el-row>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>
<canvas id="q"></canvas>

      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  const axios = require("axios");
  const basePath = "http://127.0.0.1:9999/";
  const basePath2 = "http://127.0.0.1:80/";
  export default {
    name: 'HelloWorld',
    data() {
      return {
        dialogVisible: false,
        yaos:[],
        prices:null,
        userid:null,
        user:{},
        order:{},
        erweima:null
      }
    },
    methods: {
      payment(){
        let $this=this;

        $this.yaos.forEach(a=>{
          $this.order.name+="1."+a.name;
        })
      $this.order.orderid=$this.yaos[0].orderid;
      $this.order.sums=$this.prices;
        $this.dialogVisible=true
        axios({
          url:basePath2+"erWeiMa",
          method:"post",
          data:$this.order
        }).then(res=>{
          var canvas = document.getElementById("q");
            $this.erweima= res.data;
            $this.QRCode.toCanvas(
              canvas,
              $this.erweima,
              function(error) {
                if (error) {
                  console.error(error);
                }
                console.log("QRCode success!");
              }
            );
          $this.dialogVisible=true
        })
      }

    },
    mounted(){
      let $this=this;
     this.userid= this.$route.query.userid;
      axios({
        url:basePath+"getOrders",
        method:"get",
        params:{id:this.userid}
      }).then(res=>{
        $this.prices=15+20;
        $this.yaos=res.data.obj
        $this.yaos.forEach(a=>{
          a.lingshou=a.price*a.sums;
          a.zhekou=9.0;
          a.zhehou=a.lingshou/10*a.zhekou
          $this.prices+= a.zhehou
        })

      });
      axios({
        url:basePath+"getUser",
        method:"get",
        params:{id:this.userid}
      }).then(res=>{
        $this.user=res.data.obj
      })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
